<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Geolocation Example</title>
		
		<link href="css/mui.min.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script type="text/javascript">
			var em = null,map = null;var myPoint,targetPoint;
			function plusReady() {
				if(!em || !window.plus || map) {return};
				map = new plus.maps.Map("map");
				plus.geolocation.getCurrentPosition(function(p) {
				var jd=	p.coords.longitude,wd=p.coords.latitude;
				myPoint=new plus.maps.Point(jd,wd);
				
 				map.centerAndZoom(myPoint, 16);
 				
 				map.showZoomControls(true);
				targetPoint=new plus.maps.Point(114.433912, 30.476142);
				},function(e){console.log("定位错误:"+e.message)});
			}
			if(window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}
			document.addEventListener("DOMContentLoaded", function() {
				em = document.getElementById("map");
				plusReady();
			}, false);
			
			function onError( error ) {
				var code = error.code; // 错误编码
				var message = error.message; // 错误描述信息
			}
			
			function getUserLocation(){
				map.getUserLocation( function ( state, point ){
					if( 0 == state ){
					//	alert( JSON.stringify(point) );
					var circleObj = new plus.maps.Circle( point, 500 );
					circleObj.setFillColor("#000");
					map.addOverlay(circleObj);
					}else{
						alert( "Failed!" );
					}
				});
			}
			
			function isOK(){
 			 plus.maps.Map.calculateDistance(targetPoint,myPoint,function(event){
				var distance = event.distance;  // 转换后的距离值
				if(distance<500){
					alert("恭喜你完成小目标!"+distance)
				}else{
					alert("您不在指定区域范围内！")
				}
			 },function(e){
				alert("Failed:"+JSON.stringify(e));
			  }); 
			}

		</script>
<style type="text/css">
	#map {
		width: 100%;
		position: fixed;
		top: 100px;
		bottom: 0px;
		line-height: 200px;
		text-align: center;
		background: #FFFFFF;
	}
</style>
	</head>

	<body>
			
<!--<button type="button" class="mui-btn mui-btn-primary" onclick="showUserLocation()">显示用户位置</button>
 	<button type="button" class="mui-btn mui-btn-primary" onclick="hideUserLocation()">关闭用户位置</button>
	<button type="button" class="mui-btn mui-btn-primary" onclick="isUserLocation()">是否显示用户位置</button> -->
	<button type="button" class="mui-btn mui-btn-primary" onclick="isOK()">isok</button>
	<button onclick="getUserLocation()"> 我的位置</button>	
		<div id="map">地图加载中...</div>
	</body>

</html>